<template>
    <div class="rzgl_wrap">
        <div class="page-content">
            <el-tabs class="hy-tabs" v-model="activeName" @tab-click="handleClick">
                <el-tab-pane label="实时日志" name="1">
                    <div class="tabs-content">

                        <div class="table-box">
                            <el-table
                                    :data="tableData"
                                    class="hy_table"
                            >
                                <el-table-column
                                        width="60px"
                                        prop=""
                                        label="">
                                </el-table-column>
                                <el-table-column
                                        prop="type"
                                        label="日志类型">
                                    <template slot-scope="scope">
                                        <span>{{ scope.row.logType !== 'info' ? '操作成功' : '通知' }}</span>
                                    </template>
                                </el-table-column>
                                <el-table-column
                                        prop="date"
                                        label="发生时间">
                                    <template slot-scope="scope">
                                        <span>{{ scope.row.LtimeStamp | formatNowDate }}</span>
                                    </template>
                                </el-table-column>
                                <el-table-column
                                        prop="logSource"
                                        label="设备名称">
                                </el-table-column>
                                <el-table-column
                                        prop="alertName"
                                        label="日志名称">
                                    <template slot-scope="scope">
                                        <span>{{ scope.row.logSource }}{{ scope.row.logType !== 'info' ? '操作成功' : '通知' }}</span>
                                    </template>
                                </el-table-column>
                                <el-table-column
                                        prop="logEvent"
                                        label="日志详情">
                                </el-table-column>
                            </el-table>
                        </div>

                        <el-pagination
                                class="hy-pagination"
                                @size-change="handleSizeChange"
                                @current-change="handleCurrentChange"
                                :current-page="currentPage"
                                background
                                :page-sizes="[10, 20, 50, 100]"
                                :page-size="pageSize"
                                layout="total, sizes, prev, pager, next"
                                :total="totalSize">
                        </el-pagination>
                    </div>
                </el-tab-pane>
                <el-tab-pane label="历史日志" name="2">
                    <div class="tabs-content">
                        <div class="content-head">
                            <span class="head-text">日志等级：</span>
                            <el-checkbox-group v-model="checkList">
                                <el-checkbox label="urgent">紧急</el-checkbox>
                                <el-checkbox label="important">重故障</el-checkbox>
                                <el-checkbox label="secondary">轻故障</el-checkbox>
                                <el-checkbox label="general">提示</el-checkbox>
                            </el-checkbox-group>
                            <span class="head-text">时间范围：</span>
                            <el-date-picker
                                    v-model="startTime"
                                    type="datetime"
                                    :clearable="false"
                                    placeholder="选择日期时间">
                            </el-date-picker>

                            <img class="date-img" src="../../assets/images/rzgl/icon_arrow.png" alt="" />

                            <el-date-picker
                                    v-model="endTime"
                                    type="datetime"
                                    :clearable="false"
                                    placeholder="选择日期时间">
                            </el-date-picker>

                            <div class="btn-group">
                                <el-button class="hy_btn" click="resetInfo()"><img src="../../assets/images/gjgzcx/icon_reset.png" alt="">重置</el-button>
                                <el-button class="hy_btn is_primary" type="primary" @click="getData()"><img src="../../assets/images/gjgzcx/icon_add.png" alt="">查询</el-button>
                            </div>
                        </div>

                        <div class="table-box">
                            <el-table
                                    :data="tableData"
                                    class="hy_table"
                            >
                                <el-table-column
                                        width="60px"
                                        prop=""
                                        label="">
                                </el-table-column>
                                <el-table-column
                                        prop="type"
                                        label="日志类型">
                                    <template slot-scope="scope">
                                        <span>{{ scope.row.logType !== 'info' ? '操作成功' : '通知' }}</span>
                                    </template>
                                </el-table-column>
                                <el-table-column
                                        prop="date"
                                        label="发生时间">
                                    <template slot-scope="scope">
                                        <span>{{ scope.row.LtimeStamp | formatNowDate }}</span>
                                    </template>
                                </el-table-column>
                                <el-table-column
                                        prop="logSource"
                                        label="设备名称">
                                </el-table-column>
                                <el-table-column
                                        prop="alertName"
                                        label="日志名称">
                                    <template slot-scope="scope">
                                        <span>{{ scope.row.logSource }}{{ scope.row.logType !== 'warning' ? '故障' : '告警' }}</span>
                                    </template>
                                </el-table-column>
                                <el-table-column
                                        prop="logEvent"
                                        label="日志详情">
                                </el-table-column>

                            </el-table>
                        </div>

                        <el-pagination
                                class="hy-pagination"
                                @size-change="handleSizeChange"
                                @current-change="handleCurrentChange"
                                :current-page="currentPage"
                                background
                                :page-sizes="[10, 20, 50, 100]"
                                :page-size="pageSize"
                                layout="total, sizes, prev, pager, next"
                                :total="50">
                        </el-pagination>
                    </div>
                </el-tab-pane>
            </el-tabs>
        </div>
    </div>
</template>

<script>
    export default {
        data() {
            return {
                activeName: '1',
                checkList: ['important'],
                startTime: new Date(),
                endTime: new Date(),
                tableData: [],
                currentPage: 1,
                pageSize: 10,
                totalSize: 0,
            }
        },
        methods: {
            resetInfo( ) {
                this.startTime = this.formatDate('YYYY-mm-dd', new Date( this.startTime )) + ' 00:00:00';
                this.endTime = new Date();
                this.checkList = ['important'];
                this.getData();
            },

            getData() {
                if( window.getTableDataTimer ) {
                    clearTimeout( window.getTableDataTimer );
                    window.getTableDataTimer = null;
                }

                if( this.activeName == 2 ) {
                    this.$api.queryLog(
                        {
                            "type": [
                                "info",
                                "success"
                            ],
                            level: this.checkList,
                            "range": {
                                "gte": this.formatDate('YYYY-mm-dd HH:MM:SS', new Date( this.startTime )),
                                "lte": this.formatDate('YYYY-mm-dd HH:MM:SS', new Date( this.endTime )),
                            },
                            "pageSize": this.pageSize,
                            "current": this.currentPage-1,
                        }
                    ).then(( res )=> {
                        this.tableData = res.results || [];
                    })
                    return;
                }

                this.$api.queryLogInfo(
                    {
                        current: this.currentPage-1,
                        pageSize: this.pageSize,
                    }
                ).then(( res )=> {
                    this.tableData = res.results || [];
                    this.totalSize = this.tableData.length;

                    window.getTableDataTimer = setTimeout(()=> {
                        this.getData();
                    }, 20*1000)
                })
            },

            handleClick(tab, event) {
                if( window.getTableDataTimer ) {
                    clearTimeout( window.getTableDataTimer );
                    window.getTableDataTimer = null;
                }

                this.startTime = this.formatDate('YYYY-mm-dd', new Date( this.startTime )) + ' 00:00:00';
                this.endTime = new Date();

                this.currentPage = 1;
                this.pageSize = 10;
                this.getData();
            },

            handleSizeChange(val) {
                this.pageSize = val;
                this.currentPage = 1;
                this.getData();
            },
            handleCurrentChange(val) {
                this.currentPage = val;
                this.getData();
            }
        },
        mounted() {
            this.startTime = this.formatDate('YYYY-mm-dd', new Date( this.startTime )) + ' 00:00:00';

            this.getData();
        },
        destroyed() {
            if( window.getTableDataTimer ) {
                clearTimeout( window.getTableDataTimer );
                window.getTableDataTimer = null;
            }
        }
    }
</script>

<style lang="less">
    .rzgl_wrap {
        width: 100%;
        height: 100%;
        position: relative;

        >.page-content {
            width: 100%;
            min-height: 500px;
            background-color: #ffffff;
            border-radius: 8px;
            padding: 40px;
            box-sizing: border-box;

            .tabs-content {
                width: 100%;
                margin-top: 17px;

                >.content-head {
                    width: 100%;
                    line-height: 36px;
                    position: relative;

                    .head-text {
                        display: inline-block;
                        vertical-align: top;
                        font-size: 16px;
                        font-weight: 600;
                        color: #0E1526;
                        margin-right: 12px;
                    }

                    .el-checkbox-group {
                        display: inline-block;
                        vertical-align: top;
                        margin-right: 108px;

                        >.el-checkbox {
                            font-size: 16px;
                            color: #333333;

                            .el-checkbox__inner {
                                width: 16px;
                                height: 16px;

                                &:after {
                                    left: 5px;
                                }
                            }

                            .el-checkbox__label {
                                font-size: 16px;
                                color: #333333;
                            }
                        }
                    }

                    .el-date-editor {
                        width: 200px;

                        .el-input__inner {
                            height: 36px;
                            line-height: 36px;
                            background: #FFFFFF;
                            border-radius: 2px;
                            border: 1px solid #CFD1D8;
                            font-size: 14px;
                            color: #9A9FAF;
                        }

                        .el-input__icon {
                            line-height: 38px;
                            color: #9A9FAF;
                        }
                    }

                    .date-img {
                        margin:  0 20px;
                    }

                    >.btn-group {
                        position: absolute;
                        right: 0px;
                        top: -2px;

                        .el-button {

                            img {
                                position: relative;
                                top: -0.1px;
                            }
                        }

                        .el-button.hy_btn + .el-button.hy_btn {
                            margin-left: 16px;
                        }
                    }
                }

                >.table-box {
                    margin-top: 32px;
                }
            }
        }
    }
</style>
